<template>
  <div class="page-hero" v-if="model">
    <div class="home-top bg-black display-flex ai-center p-2 white" >
      <img src="../../assets/images/logo.png" alt="" class="img ml-3">
      <div class="pl-3 flex-1">
        <span class="font-m">王者荣耀</span>
        <span class="ml-2">攻略站</span>
      </div>
      <router-link to="/" tag="div" class="">更多英雄&gt;</router-link>
    </div>
    <div class="top" :style="{'background-image': `url(${model.banner})`}">
      <div class="info white p-4">
        <div>{{model.title}}</div>
        <div class="font-xxl" style="font-weight: 700;">{{model.name}}</div>
        <div class="font-s">{{model.categories.map(v=>v.name).join('/')}}</div>
        <div class="display-flex">
          <div class="scores flex-1" v-if="model.scores">
            <span>难度</span>
            <span class="badge bg-primary">{{model.scores.difficult}}</span>
            <span>技能</span>
            <span class="badge bg-blue">{{model.scores.skills}}</span>
            <span>攻击</span>
            <span class="badge bg-red">{{model.scores.attack}}</span>
            <span>生存</span>
            <span class="badge bg-grey">{{model.scores.survive}}</span>
          </div>
          <router-link tag="span" to="/" class="grey font-s">皮肤:2&gt;</router-link>
        </div>
      </div>
    </div>
    <div class="nav bg-white pt-3 pl-3 pr-3 font-l">
      <div class="display-flex jc-around  border-b pb-2">
        <div class="nav-item active" @click="$router.push(`/heroes/${model._id}`)">英雄初识</div>
        <div class="nav-item" @click="$router.push(`/heroes/${model._id}/height`)">进阶攻略</div>
      </div>
      </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "Hero",
    props:{
      id:{require:true}
    },
    data(){
      return {
        model:{
          categories:{
            name:''
          }
        },
      }
    },
    methods:{
      async fetch(){
        const res = await this.$http.get(`heroes/${this.id}`)

        this.model = Object.assign(this.model,res.data)
        console.log(this.model)
      }
    },
    created() {
      this.fetch()
    }
  }
</script>

<style lang="scss">
  .page-hero{
    .top {
      height: 50vw;
      background: #fff no-repeat top center;
      background-size: auto 100%;
      .info{
        background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        .scores{
          .badge{
            margin: 0 0.25rem;
            display: inline-block;
            border-radius: 50%;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: 0.667rem;
            border: 1px solid rgba(255,255,255,0.2);
          }
        }
      }
    }

  }

</style>